<template>
  <el-table :data="Ming" stripe>
    <el-table-column type="index" width="100"></el-table-column>
    <el-table-column prop="ming_name" label="铭文名称"></el-table-column>
    <el-table-column prop="ming_grade" label="等级"
    :filters="[{text: '5', value: 5}, {text: '4', value: 4}, {text: '3', value: 3}, {text: '2', value: 2}, {text: '1', value: 1}]"
    :filter-method="(value, row) => row.ming_grade === value"
    ></el-table-column>
    <el-table-column prop="ming_id" label="图标"
    :filters="[{text: '红色', value: '1'}, {text: '蓝色', value: '2'}, {text: '绿色', value: '3'}]"
    :filter-method="(value, row) => String(row.ming_id).slice(0,1) === value"
    >
      <template slot-scope="scope">
        <img :src="`https://game.gtimg.cn/images/yxzj/img201606/mingwen/${scope.row.ming_id}.png`" style="height:3rem">
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template slot-scope="scope">
        <el-button type="text" size="small"
        @click="$router.push(`/mings/edit/${scope.row._id}`)">编辑</el-button>
        <el-button type="text" size="small"
        @click="remove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      Ming: []
    }
  },
  methods: {
    async getMing () {
      const { data: res } = await this.$http.get('/rest/mings')
      this.Ming = res
    },
    remove (ming) {
      this.$confirm(`是否删除铭文 "${ming.ming_name}" ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`/rest/mings/${ming._id}`)
        this.$message.success('删除成功!')
        this.getMing()
      })
    }
  },
  created () {
    this.getMing()
  }
}
</script>

<style lang="less" scoped>
</style>
